import { history } from 'umi';
import React from 'react';
import { Flex, NavBar, Divider } from 'react-vant';
import { Success } from '@react-vant/icons';
import './order-result.less';
import qrcode from '../assets/service-qrcode.png';

const goMy = () => {
  history.push('/my');
}

export default function OrderResultPage() {
  return (
    <div className='order-result'>
      <NavBar title='订单状态' leftText='我的' onClickLeft={goMy} />
      <div className='container'>
        <div className='order-status'>
          <div className='status-icon'>
            <Success className='icon' fontSize='2.5rem' color='#fff' />
          </div>
          <div className='status-text'>
            <h2 className='title'>支付已完成</h2>
            <p className='desc'>您已完成支付，请添加客服微信为您服务</p>
            <Divider className='qrcode-title'>长按二维码添加客服微信</Divider>
            <div className='qrcode-img'><img src={qrcode} alt='微信客服二维码'/></div>
            <Divider className='order-detail-divider'></Divider>
            <Flex align='center' className='order-detail'>
              <Flex.Item className='hd' span={8}>订单编号：</Flex.Item>
              <Flex.Item span={16}>20240614214843652</Flex.Item>
            </Flex>
            <Flex align='center' className='order-detail'>
              <Flex.Item className='hd' span={8}>下单时间：</Flex.Item>
              <Flex.Item span={16}>2024-06-14 21:48:43</Flex.Item>
            </Flex>
          </div>
        </div>
      </div>
    </div>
  );
}
